<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 讲师提现 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.keyword" placeholder="输入提现单号或讲师姓名" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column label="讲师图片" width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.teacher_cover" @error="tabErrorPicture(scope.row.id)" alt="" class="info-image" />
                    </template>
                </el-table-column>
                <el-table-column prop="teacher_name" label="讲师姓名"></el-table-column>
                <el-table-column label="绑定用户头像">
                    <template slot-scope="scope">
                        <img :src="scope.row.member_avatar" alt="" class="info-image" />
                    </template>
                </el-table-column>
                <el-table-column prop="member_name" label="绑定用户名称"></el-table-column>
                <el-table-column prop="order_no" label="提现单号"></el-table-column>
                <el-table-column label="提现金额">
                    <template slot-scope="scope">
                        <span class="red">¥ {{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="paid" label="提现状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.paid == 0">未同意提现</span>
                        <span v-if="scope.row.paid == 2" class="blue">提现审核中</span>
                        <span v-if="scope.row.paid == 1" class="green">提现完成</span>
                    </template>
                </el-table-column>
                <el-table-column label="提现时间">
                    <template slot-scope="scope">
                        {{ scope.row.paid_time == 0 ? '未提现' : scope.row.paid_time }}
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="申请时间"></el-table-column>
                <el-table-column label="操作" width="300" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.paid == 0" @click="deal_withdraw(scope.row.id)" type="success" size="mini">同意提现</el-button>
                        <span v-if="scope.row.paid == 2" class="blue">提现审核中</span>
                        <span v-if="scope.row.paid == 1" class="green">提现完成</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.rows"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
         <!-- 提现弹框 -->
        <!-- <el-dialog title="手动处理确认" :visible.sync="showDialog" width="30%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="分销商">
                        <img src="" alt="" class="info-image" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="sure_deal">确定已处理</el-button>
            </span>
        </el-dialog> -->
    </div>
</template>

<script>
import { withdrawListData, dealWithdrawData } from '../../api/index';
export default {
    // name: 'suggest',
    data() {
        return {
            query: {
                page: 1,
                rows: 4,
                keyword: ''
            },
            form: {

            },
            tableData: [],
            showDialog: false,
            pageTotal: 0,
            errorProduct: require('@/assets/img/noProduct.jpg'), 
        };
    },
    created() {
        this.getData();
    },
    methods: {
        tabErrorPicture(id){    // 表格图文封面默认展示图
            let i = this.tableData.findIndex(v => v.id == id);
			this.tableData[i].cover = this.errorProduct;
        },
        getData() {
            withdrawListData(this.query).then((res) => {
                console.log(res);
                this.tableData = res.data.list;
                this.pageTotal = res.data.count;
            });
        },
        // 搜索
        handleSearch() {
            this.$set(this.query);
            this.getData();
        },
        // 分页
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        },
        deal_withdraw(id) {
            this.$confirm(`确定提现吗！`, '提示', {
                type: 'warning'
            }).then(() => {
                dealWithdrawData({ id: id }).then((res) => {
                    if (res.code == 1) {
                        this.$message.success('同意提现成功');
                        setTimeout(() => {
                            this.getData();
                            //location.reload();
                        }, 200);
                    }
                });
            });
        },
    }
};
</script>

<style scoped lang="scss">
.handle-box {
    margin-bottom: 20px;
    float: right;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.mr10 {
    margin-right: 10px;
}
.info-image {
    width: 80px;
    border-radius: 4px;
}
.red {
    color: #ea644a;
}
.blue{
    color:$shenlan;
}
.green {
    color: #38b03f;
}
</style>


